<script lang="ts" setup>
withDefaults(
  defineProps<{
    level?: 0 | 1 | 2 | 3
    title?: string
    content?: string
    img?: string
    href?: string
    price?: number
  }>(),
  {
    level: 0,
    title: "未知",
    content: "这里是一些描述",
    img: "/img/1-270x160.png",
    href: "/series-python/video/1",
    price: 19.9,
  },
);
</script>

<template>
  <ClientOnly>
    <RouterLink :to="href" class="min-w-[270px]">
      <UCard
        class="pop-top cursor-pointer"
        :ui="{
          header: {
            padding: '',
          },
          body: {
            padding: tw`px-6 py-3 sm:p-4`.join(' '),
          },
        }"
      >
        <template #header>
          <img
            :src="img"
            class="w-auto h-auto rounded-t-lg cursor-pointer object-fill"
            @click="
              () => {
                console.log('点击标题', level);
              }
            "
          >
        </template>

        <div class="space-y-1 w-full dark:text-white">
          <p
            class="h-8 min-w-[238px] text-xl flex justify-between items-center cursor-pointer"
            @click="
              () => {
                console.log('点击标题');
              }
            "
          >
            <span class="capitalize">{{ title }}</span>
            <!-- <span class="text-red-600">¥ {{ price }}</span> -->
          </p>
          <p
            class="h-8 min-w-[200px] max-w-[238px] text-sm card-content cursor-pointer px-2"
            @click="
              () => {
                console.log('点击正文');
              }
            "
          >
            {{ content }}
          </p>
        </div>
      </UCard>
    </RouterLink>

    <template #fallback>
      <GskeletonCard />
    </template>
  </ClientOnly>
</template>

<style scoped>
.text p {
  line-height: 1.2em;
}

.card-content {
  word-wrap: normal;
}
</style>
